<template>
  <div class="app-container">
    <u-page title="会员升级（批量）">
      <div style="margin-bottom: 20px">
        <el-alert
          title="温馨提示"
          type="success"
          description="注意:升降级模式和新等级会验证是否在可升降级的范围。"
          show-icon
          :closable="false"
        />
      </div>
      <el-form ref="dialogForm" :model="dataForm" :rules="rules" label-position="left" label-width="100px"
               style="margin-left: 40px">
        <el-form-item prop="type" label="升级条件">
          <el-radio-group v-model="dataForm.type">
            <el-radio :label="1">升级</el-radio>
            <el-radio :label="2">降级</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="newCardType" label="新的等级">
          <level v-model="dataForm.newCardType" style="width:500px;"/>
        </el-form-item>
        <el-form-item prop="points" label="积分扣除" v-if="dataForm.type === 2">
          <el-switch v-model="dataForm.points"> </el-switch>
          <u-tip-info title="目前只限制，国际精品课-精品化妆类目"/>
        </el-form-item>
        <el-form-item prop="searchDate" label="时间范围" v-if="dataForm.points">
          <u-date-time-picker v-model="dataForm.searchDate"  type="daterange" value-format="yyyy-MM-dd" @change="changeSearchDate" />
        </el-form-item>
        <el-form-item prop="note" label="备注信息">
          <el-input v-model="dataForm.note" style="width:500px;" placeholder="请输入备注以方便追溯历史原因(必填)"
                    clearable maxlength="30" show-word-limit/>
        </el-form-item>

        <el-form-item label="操作名单">
          <el-button type="primary" icon="el-icon-plus" plain style="margin-bottom: 20px"
                     @click="dialogMemberChoose = true">
            新增名单
          </el-button>
          <el-card shadow="hover" :body-style="{ padding: '0px' }">

            <u-table
              :data="list"
              :page="false"
              :columns="columns"
              :options="listOptions"
            >
              <template v-slot:right>

                <el-table-column label="操作" align="center" fixed="right">
                  <template slot-scope="{ row }">
                    <el-button type="text" @click="remove(row)">移除</el-button>
                  </template>
                </el-table-column>

              </template>
            </u-table>

          </el-card>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submit">确认操作</el-button>
        </el-form-item>

      </el-form>
    </u-page>

    <u-dialog title="操作名单" :show.sync="dialogMemberChoose" @confirm="query">
      <el-form ref="dialogMember" :model="dialogMember" label-width="80px">
        <el-form-item prop="content" label="操作名单">
          <el-input v-model="dialogMember.content" type="textarea" placeholder="批量操作名单,手机号" clearable rows="10"
                    :rules="[
                      { required: true, message: '请填写操作名单'},
                    ]"
          />
          <u-tip-info title="格式: 手机号+换行或者英文逗号"/>
        </el-form-item>
      </el-form>
    </u-dialog>
  </div>
</template>

<script>

import level from '@/components/member/level'

export default {
  components: {
    level
  },
  data() {
    return {
      api: this.$u.api.PluginsUpgrade,
      dataForm: {
        type: 1,
        newCardType: '',
        note: '',
        points: false,
        mobiles: '',
        searchDate: [],
        beginTime: '',
        endTime: ''
      },
      rules: {
        type: [
          {required: true, message: '请选择模式', trigger: 'change'}
        ],
        newCardType: [
          {required: true, message: '请选择会员等级', trigger: 'change'}
        ],
        points: [
          {required: true, message: '请选择积分扣除', trigger: 'change'}
        ],
        note: [
          {required: true, message: '请输入备注', trigger: ['blur']}
        ],
        searchDate: [
          {required: true, message: '请输入备注', trigger: ['blur']}
        ],
      },
      // 等级列表
      level: [],
      dialogMemberChoose: false,
      dialogMember: {},
      list: [],
      listOptions: {
        index: true,
        stripe: true, // boolean 斑马纹
        headerCellStyle: { background:'#FAFAFA'}
      },
      columns: [
        {
          prop: 'card_no',
          label: '会员卡号',
          width: '120'
        },
        {
          prop: 'mobile',
          label: '手机号'
        },
        {
          prop: 'member_name',
          label: '姓名',
          width: '120'
        },
        {
          prop: 'level_name',
          label: '等级'
        }
      ],
    }
  },
  methods: {
    // 确认操作
    submit() {
      const self = this
      // 获取模式
      const title = this.dataForm.type ? '升级' : '降级'

      if(self.list.length === 0){
        self.$u.toast('请选择操作名单', 'error')
        return false
      }

      const mobiles = []
      self.list.forEach((val) => {
        mobiles.push(val.mobile)
      })

      self.dataForm.mobiles = mobiles.toString()

      // 效验数据格式
      self.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          // 模态对话框组件
          self.$confirm('此操作将执行？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 提交数据
            self.api.submit(self.dataForm).then(() => {
              // 初始化数据
              self.dataForm = {
                type: 1,
                newCardType: '',
                note: '',
                points: false,
                mobiles: '',
                searchDate: [],
                beginTime: '',
                endTime: ''
              }
              self.list = []
              // 清除表单验证状态
              self.$nextTick(() => {
                self.$refs['dialogForm'].clearValidate()
              })
              self.$nextTick(() => {
                self.$refs['dialogMember'].clearValidate()
              })
              // 通知信息
              self.$u.msg('批量处理成功')
            })
          }).catch(() => {
          })
        }
      })
    },
    // 查询列表数据
    async query() {
      const res = await this.api.query(this.dialogMember);

      // 获取列表数据
      this.list = res.data;

      this.dialogMemberChoose = false
    },
    // 时间范围
    changeSearchDate(item) {
      if (item) {
        this.dataForm.beginTime = item[0]
        this.dataForm.endTime = item[1]
      } else {
        this.dataForm.beginTime = ''
        this.dataForm.endTime = ''
      }
    },
    // 移除会员
    remove(row) {
      const self = this
      this.$confirm('确认移除【' + row.member_name + '】会员吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 处理确认事件
        self.list.splice(self.list.findIndex(item => item.card_no === row.card_no), 1)
        // 通知数据更新
        self.change()
      }).catch(() => {
      })
    },
  }
}
</script>
